<!-- 登录页 -->
<template>
  <div id="user-login">
    <nav-bar class="navbar">
      <template v-slot:left>
        <img src="~assets/img/navbar/left_arrow.svg" @click="loginOut" />
      </template>
      <template v-slot:right>
        <div class="right" @click="swichLogin">{{ modeSwich }}登录</div>
      </template>
    </nav-bar>

    <div class="login-info">
      <h2>{{ loginMode[loginModeState].modeName }}</h2>
      <p class="dec">{{ loginMode[loginModeState].declaration }}</p>

      <form action="" method="post">
        <div class="phone">
          <span>+86</span>
          <input
            type="text"
            name="phone"
            placeholder="请输入您的手机号码"
            v-model="formMess.phone"
            @focus="textFocus"
            @blur="textFocus"
          />
          <img
            v-show="crossShow"
            @click="crossClick"
            src="~assets/img/profile/remove.svg"
            class="cross"
          />
        </div>
        <div class="lock">
          <input
            type="text"
            :name="modeState"
            :placeholder="loginMode[loginModeState].modeLockDesc"
            v-model="formMess.lock"
          />
          <span v-if="!loginModeState" @click="getVerify">
            {{ loginMode[loginModeState].modeLockName }}
          </span>
          <span v-else>
            <a href="#" class="blueText">
              {{ loginMode[loginModeState].modeLockName }}
            </a>
          </span>
        </div>

        <div class="submit">
          <button type="button" @click="onSubmit()">登录</button>
          <p>
            登录即同意 <a href="#">《宠爱登录协议》</a>和
            <a href="#">《隐私协议》</a>
          </p>
        </div>

        <div class="point">{{ pointText }}</div>
      </form>
    </div>

    <div class="other-login">
      <div class="title">
        <span class="text">其他登录方式</span>
        <div class="line"></div>
      </div>
      <div class="href">
        <a href="#">
          <img src="~assets/img/profile/QQ.svg" alt="" />
        </a>
        <a href="#">
          <img src="~assets/img/profile/weixin.svg" alt="" />
        </a>
        <a href="#">
          <img src="~assets/img/profile/weibo.svg" alt="" />
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "common/navbar/NavBar.vue";

export default {
  name: "UserLogin",
  components: {
    NavBar,
  },
  data() {
    return {
      loginMode: [
        {
          modeId: 0,
          modeName: "手机号登录",
          declaration: "未注册的手机号验证通过后将自动注册",
          modeLockDesc: "请输入4位数的短信验证码",
          modeLockName: "获取验证码",
        },
        {
          modeId: 1,
          modeName: "账号密码登录",
          declaration: "已注册用户登录",
          modeLockDesc: "请输入登录密码",
          modeLockName: "忘记密码",
        },
      ],
      loginModeState: 0,
      pointText: "",
      formMess: {
        phone: "",
        lock: "",
      },
      crossShow: false,
    };
  },
  computed: {
    modeState() {
      return this.loginModeState === 0 ? "verify" : "password";
    },
    modeSwich() {
      return this.loginModeState === 0 ? "密码" : "短信";
    },
    pointShow() {
      return this.pointText === "" ? false : true;
    },
    getVerify() {
      if (this.formMess.phone) {
        let times = 60;
        if (times < 60) {
          return;
        }

        this.timer = setInterval(() => {
          times--;
          this.loginMode[0].modeLockName = times + "s";
          if (times === 0) {
            clearInterval(this.timer);
            this.loginMode[0].modeLockName = "获取验证码";
          }
        }, 1000);

        let timesP = 5;
        this.timerP = setInterval(() => {
          timesP--;
          this.pointText = "验证码已发送！";
          var point = document.querySelector(".point");
          point.classList = "point fadein";
          if (timesP === 0) {
            clearInterval(this.timerP);
            point.classList = "point fadeout";
          }
        }, 1000);
      } else {
        return;
      }
    },
  },
  methods: {
    swichLogin() {
      this.loginModeState
        ? (this.loginModeState = 0)
        : (this.loginModeState = 1);
    },
    back() {
      console.log("back");
    },
    loginOut() {
      this.$emit("loginOut");
    },
    onSubmit() {
      var flag = false
      var reguPhone = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
      var phone = this.formMess.phone;
      if (reguPhone.test(phone)) {
        console.log("phone true");
        flag = true
      } else {
        console.log("phone false");
      }

      //验证码验证 后期连接口补代码
      //验证代码在这里写

      //flag通过 发送异步请求
      //代码写这

      //得到返回的用户数据 发送给UserShow页面展示
      //返回的用户数据 可储存在vuex
      //这里简单给父组件发送展示内容
      //跳转
      if(flag){
        this.$emit("getUserData",'nickName');
      }

    },
    textFocus() {
      if (!this.formMess.phone) {
        this.crossShow = !this.crossShow;
      }
    },
    crossClick() {
      this.formMess.phone = "";
      this.crossShow = !this.crossShow;
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>

<style scoped>
#user-login {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 100;
}
.navbar img {
  width: 25px;
  height: 25px;
}
.right {
  font-size: 17px;
}
.login-info {
  margin: 40px 30px;
}
.dec {
  color: #ccc;
  margin: 10px 0 50px;
  font-size: 13px;
  letter-spacing: 1px;
}
.phone,
.lock {
  position: relative;
  padding-bottom: 20px;
}
.lock input {
  margin-top: 30px;
  padding: 0 10px;
  width: 70%;
}
.lock span {
  width: 30%;
  text-align: right;
  display: inline-block;
}
.phone::after,
.lock::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #e5e5e5;
  color: #e5e5e5;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.phone input::-webkit-input-placeholder {
  color: #ccc;
  font-size: 17px;
}
.lock input::-webkit-input-placeholder {
  color: #ccc;
  font-size: 15px;
}
.phone span {
  padding: 0 10px;
}

.submit {
  margin-top: 100px;
  text-align: center;
}
.submit button {
  background-image: linear-gradient(to right, #ff8b12, #fe5d05);
  color: #fff;
  padding: 15px 110px;
  border-radius: 40px;
}
.submit p {
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: 1px;
}
.blueText {
  color: #058ef8;
}
.submit p a {
  color: #058ef8;
}
.other-login {
  color: #ccc;
  position: fixed;
  padding: 0 30px 50px 30px;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.title .text {
  background-color: #fff;
  display: inline-block;
  padding: 0 10px;
  font-size: 13px;
  letter-spacing: 1px;
  position: relative;
  z-index: 20;
}
.title .line {
  border-top: 1px solid #ccc;
  position: relative;
  top: -8px;
}

.href {
  display: flex;
  justify-content: space-evenly;
  padding-top: 20px;
}
.href a {
  width: 50px;
}
.href a img {
  width: 100%;
}

.point {
  position: fixed;
  margin: 0 auto;
  bottom: 63px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(235, 235, 235, 0.8);
  padding: 20px 30px;
  border-radius: 20px;
  z-index: 100;
  opacity: 0;
}
.fadeout.point {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}
.fadein.point {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  opacity: 1;
}
.cross {
  width: 15px;
  position: absolute;
  right: 3px;
}
</style>